import { Button, CalendarPickerView, Form, Input } from "antd-mobile"
import { useState } from "react"
import { useDispatch, useSelector } from 'react-redux'
import dayjs from 'dayjs'
const App=()=>{
  const [visible5, setVisible5] = useState(false)
  const date = useSelector((store) => store.ticket.date)
  const renderBottom = (dt) => {
    const c = Math.ceil(dayjs(dt).diff(dayjs(), 'day', true))

    if (c === 0) {
      return '今天'
    } else if (c === 1) {
      return '明天'
    } else if (c === 2) {
      return '后天'
    }
    return ''
  }
  return <div>
    <Form
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='start'
          label='出发地'
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>
        </Form>
        <CalendarPickerView
          title="选择出发日期"
          min={Date.now()}
          max={Date.now() + 14 * 24 * 60 * 60 * 1000}
          renderTop={false}
          renderBottom={renderBottom}
          value={date}
          onChange={(val) => {
            console.log(val)
            if (val) {
              dispatch(updateDate(val.toString()))
            }
            setVisible5(false)
          }}
        />
  </div>
}
export default App